<template>
    <div id='myMessage'>
        <div class='filter-container'>
            <el-radio-group v-model='queryParams.isSys' @change='changeMsgTypeHandler'>
                <el-radio :label='true'>系统通知</el-radio>
                <el-radio :label='false'>评论我的</el-radio>
            </el-radio-group>
        </div>
        <div v-if='queryParams.isSys' class='msg-container'>
            <div class='header-info'>
                <!--                <el-form>-->
                <!--                    <el-input placeholder='搜索消息' />-->
                <!--                </el-form>-->
                <span></span>
                <div class='count-info'>
                    <span class='read'>已读{{ readInfo.read }}条</span>
                    <span class='no-read'>未读{{ readInfo.notRead }}条</span>
                </div>
            </div>
            <ul class='message-list'>
                <template v-if='msgList.length'>
                    <li v-for='msg in msgList' @click='lookComment(msg)' :key='msg.commentId' class='message-item'>
                        <div class='content'>{{ msg.content }}</div>
                        <div class='time'>{{ msg.createTime }}</div>
                        <span class='badge' v-if='!msg.readStatus'></span>
                    </li>
                </template>
                <li v-else class='empty'>暂无系统通知</li>
            </ul>
            <div class='pagination'>
                <pagination
                    v-show='total > 0'
                    v-model:limit='queryParams.pageSize'
                    v-model:page='queryParams.pageNum'
                    :total='total'
                    layout='total, prev, pager, next'
                    @pagination='getList'
                />
            </div>
        </div>
        <div v-else class='msg-container'>
            <div class='header-info'>
                <!--                <el-form>-->
                <!--                    <el-input placeholder='搜索消息' />-->
                <!--                </el-form>-->
                <span></span>
                <div class='count-info'>
                    <span class='read'>已读{{ readInfo.read }}条</span>
                    <span class='no-read'>未读{{ readInfo.notRead }}条</span>
                </div>
            </div>
            <ul class='message-list comment-me'>
                <template v-if='msgList.length'>
                    <li v-for='(msg) in msgList' @click='lookComment(msg)' :key='msg.commentId' class='message-item'>
                        <div class='content'>{{ msg?.content || '评论内容' }}</div>
                        <div class='time'>
                            {{ (formatTime(new Date(msg?.createTime).getTime(), '{y}-{m}-{d} {h}:{i}:{s}'))
                            }}
                        </div>
                        <div class='userinfo'>
                            <img v-if='msg?.user?.avatar' :src='`/api/${msg?.user?.avatar}`' alt='avatar'>
                            <img v-else src='@/assets/images/profile.jpg' alt='avatar'>
                            <span>{{ msg?.user?.nickName || '昵称' }}</span>
                        </div>
                        <span class='badge' v-if='!msg.readStatus'></span>
                    </li>
                </template>

                <li v-else class='empty'>暂无评论消息</li>

            </ul>
            <div class='pagination'>
                <pagination
                    v-show='total > 0'
                    v-model:limit='queryParams.pageSize'
                    v-model:page='queryParams.pageNum'
                    :total='total'
                    layout='total, prev, pager, next'
                    @pagination='getList'
                />
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { getCurrentInstance, reactive, ref, toRefs } from 'vue';
import { commentMy, read, readAndNotReadCount } from '@/api/business/comment';
import { formatTime } from '@/utils/sk';
import { _Comment, Comment } from '@/api/model/Comment';

const { proxy } = getCurrentInstance();
const readInfo = ref({
    read: 0,
    notRead: 0
});
const total = ref(0);
const msgList = ref<_Comment [] | Comment[]>([]);
/*请求参数定义*/
const data = reactive({
    form: {},
    queryParams: { pageNum: 1, pageSize: 10, isSys: true }
});
const { form, queryParams } = toRefs(data);
/*获取我的消息*/
const getList = () => {
    commentMy(queryParams.value).then(res => {
        msgList.value = res.rows;
        total.value = res.total;
    });
};
/*消息类型切换*/
const changeMsgTypeHandler = () => {
    queryParams.value.pageNum = 1;
    getList();
    readAndNotReadCountHandler();
};
/*获取已读和未读消息数量*/
const readAndNotReadCountHandler = () => {
    readAndNotReadCount({ isSys: queryParams.value.isSys }).then(res => {
        readInfo.value = res.data as any;
    });
};
/*查看消息*/
const lookComment = (msg: Comment) => {
    proxy.$modal.alertSuccess(msg.user?.nickName, msg.content).then(() => {
        if (!msg.readStatus) {
            return read(msg.commentId);
        }
    }).then(() => {
        if (!msg.readStatus) {
            changeMsgTypeHandler();
        }
    });
};
getList();
readAndNotReadCountHandler();
</script>
<style scoped lang='scss'>
.msg-container {
    border: 1px solid #efefef;
    padding: 20px;
    min-height:450px;
    .header-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }

        .count-info {
            font-size: 16px;
            font-weight: 400;
            color: #409EFF;
        }

        .read {
            margin: 0 20px;
            color: var(--el-color-primary);
        }

        .no-read {
            color: var(--el-color-danger);
        }
    }

    .message-list {
        margin-top: 20px;


        .badge {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #F56C6C;
            top: -5px;
            right: -5px;
            z-index: 1;
            border-radius: 50%;
        }

        .message-item {
            padding: 20px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 43px;
            background: #F2F6FC;
            border-radius: 4px;
            position: relative;
            margin-bottom: 10px;

            .content {
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.8);
            }

            .time {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.6);
            }
        }

        &.comment-me {
            display: flex;
            flex-wrap: wrap;

            .pagination {
                width: 100%;
            }

            .content {
                @include ellipsisOption(1);
                width: 180px;
            }

            .message-item {
                margin-right: 50px;
                width: calc(50% - 25px);

                &:nth-child(2n) {
                    margin-right: 0;
                }
            }

            .userinfo {
                display: flex;
                align-items: center;

                span {
                    font-size: 12px;
                    font-weight: 400;
                    color: #3D3D3D;
                }

                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 30px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
